import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  Text,
  ActivityIndicator,
  Animated,
  Easing,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {Colors} from '../styles/common';
import {CachedImage} from 'react-native-img-cache';
import Svg, {Circle, Path} from 'react-native-svg';
import Device from '../utils/device';
const styles = StyleSheet.create({
  container: {
    width: (Device.getDeviceWidth() - 4 * 20) / 3 - 2,
    height: (Device.getDeviceWidth() - 4 * 20) / 3 - 2,
    borderRadius: 50,
    // overflow: 'hidden',
  },
  name: {
    color: 'white',
    textAlign: 'center',
    marginTop: 5,
  },
});

export default class GameIcon extends Component {
  static propTypes = {
    containerStyle: PropTypes.object,
    icon: PropTypes.any.isRequired,
    onPress: PropTypes.func.isRequired,
    progress: PropTypes.object.isRequired,
    name: PropTypes.string,
    addMode: PropTypes.bool,
  };

  static defaultProps = {
    progress: {
      show: false,
      value: undefined,
    },
    addMode: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      iconRatio: 0,
    };
  }

  componentDidMount() {
    if (!this.props.addMode) {
      Image.getSize(
        this.props.icon,
        (width, height) => {
          // console.log('获取到图标宽高为', width, height);

          if (width == 0 || height == 0) {
            this.setState({
              iconRatio: 1,
            });
          } else {
            this.setState({
              iconRatio: height / width,
            });
          }
        },
        (err) => {
          console.log('获取出错', err);
          this.setState({
            iconRatio: 1,
          });
        },
      );
    }
  }

  render() {
    let {containerStyle, progress, name, onPress} = this.props;
    let {iconRatio} = this.state;
    let height =
      containerStyle && containerStyle.height
        ? containerStyle.height
        : styles.container.height;
    let outerRadius = height / 2;
    let innerRadius = (height - 4) / 2;

    const layerBorder = 15;
    const space = -4;

    // console.log('内部区半径为', innerRadius);

    //根据百分比计算终点位置

    if (progress.show && progress.value !== undefined) {
      let radius = innerRadius - layerBorder - space;
      let centerX = innerRadius;
      let centerY = innerRadius;

      progress.value == 0 ? (progress.value = 0.0001) : progress.value;

      var endX = centerX + radius * Math.sin(progress.value * 2 * Math.PI);
      var endY = centerY - radius * Math.cos(progress.value * 2 * Math.PI);

      // console.log('原中心点位置', centerX, centerY);
      // console.log('半径' + radius);
      // console.log('计算终点位置', endX, endY);
    }

    return (
      <View>
        <TouchableOpacity
          onPress={onPress}
          style={[styles.container, this.props.containerStyle]}>
          <LinearGradient
            start={{x: 0, y: 1}}
            end={{x: 1, y: 1}}
            colors={['#CE18EC', '#6601F5']}
            style={{
              flex: 1,
              padding: 2,
              borderRadius: outerRadius,
              overflow: 'hidden',
            }}>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                position: 'relative',
                flex: 1,
                backgroundColor: '#000',
                borderRadius: innerRadius,
                overflow: 'hidden',
              }}>
              <CachedImage
                style={{
                  width: progress.show ? '80%' : 16,
                  height: progress.show ? (height - 4) * 0.8 * iconRatio : 16,
                }}
                // width={progress.show ? '80%' : 16}
                // height={20}
                source={
                  this.props.addMode ? this.props.icon : {uri: this.props.icon}
                }></CachedImage>
              {progress.show && progress.value !== undefined ? (
                <Svg
                  style={{
                    position: 'absolute',
                    left: 0,
                    top: 0,
                  }}
                  width={innerRadius * 2}
                  height={innerRadius * 2}
                  viewBox={`0 0 ${innerRadius * 2} ${innerRadius * 2}`}>
                  <Path
                    d={`
                    M ${innerRadius} ${innerRadius}
                    m ${-innerRadius + layerBorder / 2}, 0
                    a ${innerRadius - layerBorder},${
                      innerRadius - layerBorder
                    } 0 1,0 ${2 * innerRadius - layerBorder},0
                    a ${innerRadius - layerBorder},${
                      innerRadius - layerBorder
                    }, 0 1,0 ${-2 * innerRadius + layerBorder},0
                    M 0 0
                    L ${innerRadius * 2} 0
                    L ${innerRadius * 2} ${innerRadius * 2}
                    L 0 ${innerRadius * 2}
                    Z
                    `}
                    fill={'rgba(255,255,255,0.8)'}></Path>
                  <Path
                    fill={'rgba(255,255,255,0.8)'}
                    d={`
                    M ${innerRadius} ${innerRadius}
                    L ${innerRadius} ${layerBorder + space}
                    A ${innerRadius - layerBorder - space},${
                      innerRadius - layerBorder - space
                    } 0 ${progress.value < 0.5 ? 1 : 0},0 ${endX},${endY}
                    Z
                    `}></Path>
                </Svg>
              ) : null}
            </View>
          </LinearGradient>
        </TouchableOpacity>
        <Text
          style={[
            styles.name,
            {
              width: outerRadius * 2,
            },
          ]}>
          {name}
        </Text>
      </View>
    );
  }
}
